<template>
	<div class="invaStyle">
		<el-header>
			<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" v-permissionKey="['add_proportion']" @click="formCom('新增')"
				>新增
			</el-button>
			<el-form>
				<el-form-item label="基金代码/名称：">
					<el-select
						v-model="fundManagerQuery.fundSysCode"
						clearable
						filterable
						@change="statuCheck(1)"
						placeholder="请选择基金"
						size="medium"
					>
						<el-option
							v-for="(item, index) in fundList"
							:key="index + item.fundSysCode"
							:label="item.fundCode + '-' + item.fundFullName"
							:value="item.fundSysCode"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="投资风格：">
					<el-input v-model="fundManagerQuery.investmentStyle" @input="statuCheck(1)" size="medium"></el-input>
				</el-form-item>
				<el-form-item label=" 状态：">
					<el-select v-model="fundManagerQuery.checkState" @change="statuCheck(1)" filterable size="medium">
						<el-option v-for="(item, index) in checkList" :key="item.key + index" :label="item.lable" :value="item.key"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="fundManagerList"
				:default-sort="{ prop: 'date', order: 'descending' }"
				:header-cell-style="{ background: '#FAFAFA' }"
				border
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column label="基金名称" prop="fundSysCode" :formatter="tabFormatter"> </el-table-column>
				<el-table-column label="投资风格" prop="investmentStyle" width="140">
					<template slot-scope="scope">
						<el-popover trigger="hover" placement="bottom">
							<span v-if="!!scope.row.investmentStyleInfo">{{ scope.row.investmentStyleInfo.investmentStyle }}</span>
							<div slot="reference" class="ellipsis" v-if="!!scope.row.investmentStyleInfo">
								<span
									v-if="
										scope.row.investmentStyleInfo.investmentStyle != null &&
											scope.row.investmentStyleInfo.investmentStyle.length > 6
									"
									>{{ scope.row.investmentStyleInfo.investmentStyle.substr(0, 5) + '.' }}</span
								>
								<span v-else>{{ scope.row.investmentStyleInfo.investmentStyle }}</span>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="管理比例" prop="managerRatio" width="140">
					<template slot-scope="scope">
						{{ scope.row.managerRatio + '%' }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" sortable prop="startDate" width="140">
					<template slot-scope="scope">
						{{ scope.row.startDate | timerConversionStr }}
					</template>
				</el-table-column>
				<el-table-column label="结束时间" sortable prop="endDate" width="140">
					<template slot-scope="scope">
						{{ scope.row.endDate | timerConversionStr }}
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="checkState" :formatter="formatterCheckStatus" width="140"> </el-table-column>
				<el-table-column label="附件" prop="fileName" width="140">
					<template slot-scope="scope">
						<el-popover trigger="hover" placement="bottom">
							<span>{{ scope.row.fileName }}</span>
							<div slot="reference" class="ellipsis" @click="openFileDetails(scope.row)">
								<span v-if="scope.row.fileName != null && scope.row.fileName.length > 8">{{
									scope.row.fileName.substr(0, 7) + '.'
								}}</span>
								<span v-else>{{ scope.row.fileName }}</span>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="280"
					>>
					<template slot-scope="scope">
						<el-button
							type="primary"
							size="mini"
							v-permissionKey="['edit_proportion']"
							icon="el-icon-edit"
							v-if="opsList.indexOf('f_invest_style_edit') != -1"
							@click="formCom('编辑', scope.row)"
							>编辑</el-button
						>
						<el-button
							type="primary"
							size="mini"
							v-permissionKey="['check_proportion']"
							v-if="scope.row.checkState === '0' && opsList.indexOf('f_assess_met_check') != -1"
							@click="formCom('复核', scope.row)"
							icon="el-icon-s-check"
							>复核</el-button
						>
						<el-button
							size="mini"
							v-permissionKey="['del_proportion']"
							type="danger"
							class="delebtn"
							v-if="opsList.indexOf('f_assess_met_del') != -1"
							@click="delFundAssessment(scope.row)"
							icon="el-icon-delete"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging2.size"
				@current-change="handleCurrentChange2"
				@size-change="handleSizeChange2"
				:current-page="paging2.num"
				:page-sizes="paging2.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging2.total"
			/>
		</el-main>
		<propInfo :title="title" :addComShow="addComShow" @comIsShow="comIsShow" @queryFundManagerList="queryFundManagerList" ref="propinfo" />
	</div>
</template>
<script>
	import { seachRadio, delRadio } from '@/api/productApi/assessment'
	import propInfo from './components/info'
	import { getFundList } from '@/api/productApi/mechanism'
	import { downloadFile } from '@/api/productApi/file'
	import { debounce } from '@/utils/debounceFunc'
	import { SpecialReplace } from '@/utils/characters'
	export default {
		name: 'Proportion',
		components: {
			propInfo
		},
		data() {
			return {
				title: '',
				addComShow: false,
				fundManagerQuery: {
					fundFullName: '',
					investmentStyle: '',
					checkState: ''
				},
				fundManagerList: [],
				paging2: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 20, 50, 100]
				},
				opsList: ['f_invest_style_edit', 'f_assess_met_check', 'f_assess_met_del', 'f_invest_ratio_add'], // 操作权限
				fundList: [], // 基金列表（下拉框）
				checkList: [
					{ key: '', lable: '--全部--' },
					{ key: '0', lable: '待复核' },
					{ key: '1', lable: '已复核' },
					{ key: '2', lable: '已驳回' }
				],
				searchLoading: false,
				cacheData: [] // 缓存最新输入的值
			}
		},
		mounted() {
			this.getFundList()
			this.queryFundManagerList()
		},
		methods: {
			comIsShow() {
				this.addComShow = !this.addComShow
			},

			formCom(type, obj) {
				this.title = ''
				this.title = type
				this.comIsShow()
				if (obj) {
					this.$refs.propinfo.edit(JSON.stringify(obj))
				}
			},

			// 基金列表（下拉框）
			async getFundList() {
				await getFundList({}).then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							if (item.baseInfo) {
								item.fundFullName = item.baseInfo.fundFullName
								item.fundName = item.baseInfo.fundName
								item.fundCode = item.baseInfo.fundCode
							}
						})
						this.fundList = res.data.body
					}
				})
			},

			statuCheck(num) {
				this.paging2.num = 1
				this.cacheData = [this.fundManagerQuery]
				if (!this.searchLoading) {
					this.queryFundManagerList()
				}
			},

			// 改变页数
			handleCurrentChange2: function(val) {
				this.paging2.num = val
				this.queryFundManagerList()
			},

			// 改变条数
			handleSizeChange2: function(val) {
				this.paging2.num = 1
				this.paging2.size = val
				this.queryFundManagerList()
			},

			// 基金-投资列表
			queryFundManagerList: debounce(function(form) {
				if (SpecialReplace(this.fundManagerQuery.investmentStyle, false)) {
					return
				}
				if (form) {
					this.paging2.num = 1
				}
				this.searchLoading = true
				this.cacheData = []
				seachRadio(this.fundManagerQuery, this.paging2)
					.then(res => {
						if (res.msgCode === 'Y') {
							res.data.body.forEach(item => {
								if (item.productFundInfo) {
									if (item.productFundInfo.baseInfo) {
										item.productFundInfo.fundFullName = item.productFundInfo.baseInfo.fundFullName
										item.productFundInfo.fundName = item.productFundInfo.baseInfo.fundName
									}
								}
							})
							this.paging2.total = res.data.page.total
							this.fundManagerList = res.data.body
						}
					})
					.finally(() => {
						if (!this.cacheData.length) {
							this.searchLoading = false
						}
						if (this.cacheData.length && this.searchLoading) {
							this.queryFundManagerList()
						}
					})
			}, 10),

			// 文件下载
			openFileDetails(obj) {
				downloadFile({ fid: obj.fileId }).then(item => {
					if (item.msgCode === 'N') {
						this.$message({ showClose: true, message: '文件不存在', type: 'error' })
						return
					}
					if (item) {
						this.$message({
							showClose: true,
							message: '正在下载文件，请稍等......',
							customClass: 'el-messageClass',
							type: 'success'
						})
						window.open(`/update/download.do?fid=${obj.fileId}`)
					}
				})
			},

			delFundAssessment: function(item) {
				let fundCode = ''
				if (this.fundList.filter(items => items.fundSysCode === item.fundSysCode).length) {
					fundCode = this.fundList.filter(items => items.fundSysCode === item.fundSysCode)[0].baseInfo
						? this.fundList.filter(items => items.fundSysCode === item.fundSysCode)[0].baseInfo.fundCode
						: ''
				}
				this.operatorComfirm(() => {
					delRadio(item).then(res => {
						if (res.msgCode === 'Y') {
							if (this.paging2.total === 11) {
								this.paging2.num = 1
							}
							this.$message({ message: res.msg, customClass: 'el-messageClass', type: 'success' })
							this.queryFundManagerList()
						}
					})
				}, '确认是否删除该条基金[' + fundCode + '],' + '投资风格[' + item.investmentStyleInfo.investmentStyle + ']的数据')
			},

			tabFormatter(row, column, cellValue, index) {
				if (this.fundList.some(item => item.fundSysCode === cellValue)) {
					const obj = this.fundList.filter(item => item.fundSysCode === cellValue)
					return `${obj[0].baseInfo.fundCode}-${obj[0].baseInfo.fundFullName}`
				}
			},

			formatterCheckStatus(row, column, cellValue, index) {
				if (cellValue === '0') {
					return '待复核'
				} else if (cellValue === '1') {
					return '已复核'
				} else if (cellValue === '2') {
					return '已驳回'
				}
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
